<template>
  <div class="detail">
    <van-nav-bar
      title="图文资讯详细页"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="header">
      <div class="title">
        {{ articleDetail.title }}
      </div>
      <div class="header-info">
        <div class="time">{{ articleDetail.add_time }}</div>
        <div class="view">
          <span>{{ articleDetail.click }}</span>
          次浏览
        </div>
        <div class="type">
          分类:
          <span>{{ articleDetail.category }}</span>
        </div>
      </div>
    </div>

    <div class="imgs">
      <div class="img" v-for="(item, index) in articleImages" :key="index">
        <img :src="item.src" alt="" />
      </div>
    </div>

    <article v-html="articleDetail.content"></article>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import { getImageInfo, getThumImages } from "@/apis/article";
export default {
  data() {
    return {
      articleDetail: [],
      articleImages: [],
    };
  },
  components: {
    Title,
  },
  async created() {
    //   获取图文详细
    this.articleDetail = (
      await getImageInfo(this.$route.params.id)
    ).data.message[0];
    // 处理时间
    this.articleDetail.add_time = this.articleDetail.add_time.split("T")[0];
    // console.log("this.articleDetail", this.articleDetail);

    // 获取图文图片
    this.articleImages = (
      await getThumImages(this.$route.params.id)
    ).data.message;
    console.log("this.articleImages", this.articleImages);
  },
};
</script>

<style lang="less" scoped>
article {
  padding: 0 5px;
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}
.img {
  width: 30%;
  height: initial;
  margin: 4px 4px;
}
img {
  width: 100%;
  //   height: 50px;
  margin: 0 6px;
}
.view {
  margin: 0 20px;
}
.time {
  padding-top: 3px;
}
.header-info {
  display: flex;
  color: #9b9cb5;
  margin: 10px;
  align-items: center;
}
.header {
  padding: 10px 3px;
  border-bottom: 1px solid #e3e3e5;
}
.title {
  font-weight: bold;
  font-size: 22px;
  color: #0088d1;
}
/deep/.van-nav-bar__content {
  background-color: #f7f7f7;
}
</style>
